import 'package:flutter/material.dart';

//void main() => runApp(MyApp());

//void main(){
//  runApp(
//    new MaterialApp(
//      title: "ImageDemo",
//      home: new ImageDemo(),
//    )
//  );
//}

//void main(){
//  runApp(
//      new MaterialApp(
//        title: "TextDemo",
//        home: new TextDemo(),
//      )
//  );
//}

//void main(){
//  runApp(
//      new MaterialApp(
//        title: "TextDemo",
//        home: new IconDemo(),
//      )
//  );
//}


//void main(){
//  runApp(
//      new MaterialApp(
//        title: "IconButton",
//        home: new IconButtonDemo(),
//      )
//  );
//}

//void main(){
//  runApp(
//      new MaterialApp(
//        title: "RaiseButtonDemo",
//        home: new RaiseButtonDemo(),
//      )
//  );
//}

//void main(){
//  runApp(
//      new ListViewDemo()
//  );
//}

//void main(){
//  runApp(
//      new HorizontalListViewDemo()
//  );
//}

//void main(){
//  runApp(
//      new ItemBuilderListViewDemo(
//        //使用generate方法产生500条数据
//        items: new List<String>.generate(500, (i) => "Item $i"),
//      )
//  );
//}

//void main(){
//  runApp(
//      new GridViewDemo()
//  );
//}

void main(){
  runApp(
      new LoginPage()
  );
}

// 容器组件
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "容器组件示例",
      home: Scaffold(
        appBar: AppBar(
          title: Text("容器组件示例"),
        ),
        body: Center(
          //添加容器
          child: Container(
            width: 200,
            height: 200,
            //添加边框装饰效果
            decoration: BoxDecoration(
              color: Colors.white,
              //设置上下左右四个边框样式
              border: new Border.all(
                //边框颜色
                color: Colors.grey,
                //边框粗细
                width: 8.0,
              ),
              //边框的弧度
              borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
            ),
            child: Text(
              "Flutter",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 28
              ),
            ),
          ),
        ),
      ),
    );
  }

}

// 图片组件
class ImageDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
//      //加载资源文件
//      child: new Image.asset(
//        "android/assets/timg.jpg",
//        fit: BoxFit.fill,
//      ),
      //添加网络图片
      child: new Image.network(
        //图片URL
        'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1602468945&di=bb5e9c369342673fdb046505128b90e2&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg',
        //填充模式
        fit: BoxFit.fitWidth,
      ),
    );
  }

}


// 文本组件
class TextDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("文本控件"),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            "红色 + 黑色删除线 + 25号",
            style: new TextStyle(
              color: const Color(0xffff0000),
              decoration: TextDecoration.lineThrough,
              decorationColor: const Color(0xff000000),
              fontSize: 25.0
            ),
          ),
          new Text(
            "橙色 + 下划线 + 24号",
            style: new TextStyle(
                color: const Color(0xffff9900),
                decoration: TextDecoration.underline,
                fontSize: 24.0
            ),
          ),
          new Text(
            "虚线上划线 + 斜体 + 23号",
            style: new TextStyle(
                decoration: TextDecoration.overline,
                decorationStyle: TextDecorationStyle.dashed,
                fontSize: 23.0,
                fontStyle: FontStyle.italic,
            ),
          ),
          new Text(
            "加粗 + 24号",
            style: new TextStyle(
              fontSize: 24.0,
              fontStyle: FontStyle.normal,
              fontWeight: FontWeight.bold,
              letterSpacing: 6
            ),
          ),
        ],
      ),
    );
  }

}


// 图标组件
class IconDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("IconDemo"),
      ),
      body: new Icon(Icons.phone,color: Colors.green[500],size: 80.0,),
    );
  }

}

//图标按钮组件
class IconButtonDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("IconButtonDemo"),
      ),
      body: new Center(
        child: new IconButton(
            icon: Icon(Icons.volume_up,size: 48.0,),
            tooltip: "按下操作",
            onPressed: (){
              print("按下操作");
            }
        ),
      ),
    );
  }
}

// 凸起按钮组件
class RaiseButtonDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("RaiseButtomDemo"),
      ),
      body: new Center(
        child: new RaisedButton(
            onPressed: (){

            },
            child: new Text("RaiseButton 组件"),
        ),
      ),
    );
  }

}

// 基础列表组件
class ListViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final title = "基础列表示例";
    return new MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ) ,
        //添加基础列表
        body: new ListView(
          children: <Widget>[
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.phone),
              //添加文本
              title: Text("Phone"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.airplay),
              //添加文本
              title: Text("Airplay"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
            ListTile(
              //添加图标
              leading: Icon(Icons.alarm),
              //添加文本
              title: Text("Alarm"),
            ),
          ],
        ),
      ),
    );
  }

}

// 水平列表组件
class HorizontalListViewDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    final title = "水平列表组件";
    return new MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 200.0,
          child: ListView(
            //设置水平方向排列
            scrollDirection: Axis.horizontal,
            //添加子元素
            children: <Widget>[
              Container(
                width: 160.0,
                color: Colors.lightBlue,
              ),
              Container(
                width: 160.0,
                color: Colors.amber,
              ),
              Container(
                width: 160.0,
                color: Colors.green,
                child: Column(
                  children: <Widget>[
                    Text(
                      "水平",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 36.0,
                      ),
                    ),
                    Text(
                      "列表",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 36.0,
                      ),
                    ),
                    Icon(Icons.list)
                  ],
                ),
              ),
              Container(
                width: 160.0,
                color: Colors.deepOrangeAccent,
              ),
              Container(
                width: 160.0,
                color: Colors.pinkAccent,
              ),
              Container(
                width: 160.0,
                color: Colors.black,
              ),
            ],
          ),
        ),
      ),
    );
  }

}

// 长列表组件
class ItemBuilderListViewDemo extends StatelessWidget{

  //列表数据集
  final List<String> items;

  ItemBuilderListViewDemo({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = "长列表组件";
    return new MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        // 使用 ListView.builder来构造列表项
        body: new ListView.builder(
            //列表长度
            itemCount: items.length,
            // 列表项构造器
            itemBuilder: (context,index){
              return new ListTile(
                leading: new Icon(Icons.phone),
                title: new Text("${items[index]}"),
              );
            },
        ),
      ),
    );
  }

}

// 网格组件
class GridViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final title = "网格列表组件";
    return new MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        // 通过 GridView.count 构建网格
        body: new GridView.count(
            primary: false,
            // 四周增加一定的空隙
            padding: const EdgeInsets.all(20.0),
            crossAxisSpacing: 30.0,
            // 一行上放3个数据
            crossAxisCount: 3,
            //数据项 5行3列
            children: <Widget>[
              const Text("第1行第1列"),
              const Text("第1行第2列"),
              const Text("第1行第3列"),
              const Text("第2行第1列"),
              const Text("第2行第2列"),
              const Text("第2行第3列"),
              const Text("第3行第1列"),
              const Text("第3行第2列"),
              const Text("第3行第3列"),
              const Text("第4行第1列"),
              const Text("第4行第2列"),
              const Text("第4行第3列"),
              const Text("第5行第1列"),
              const Text("第5行第2列"),
              const Text("第5行第3列"),
            ],
        ),
      ),
    );
  }

}


class LoginPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _LoginPageState();
  }

}

// 表单组件
class _LoginPageState extends State<LoginPage>{

  //全局key来用来获取Form表单组件
  GlobalKey<FormState> loginKey = new GlobalKey<FormState>();
  //用户名
  String userName;
  //密码
  String password;
  void login(){
    //读取当前 Form 的状态
    var loginForm = loginKey.currentState;
    //验证 Form 表单
    if(loginForm.validate()){
      loginForm.save();
      print("userNmae: " + userName + "  password: " + password);
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final title = "表单组件";
    return new MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: new Column(
          children: <Widget>[
            new Container(
              padding: const EdgeInsets.all(16.0),
              child: new Form(
                  key: loginKey,
                  child: new Column(
                    children: <Widget>[
                      new TextFormField(
                        decoration: new InputDecoration(
                          labelText: "请输入用户名",
                        ),
                        //验证表单方法
                        validator: (value){
                          return value.length < 1 ? "用户名不能为空" : null;
                        },
                        onSaved: (value){
                          userName = value;
                        },
                        onFieldSubmitted: (value){

                        },
                      ),
                      new TextFormField(
                        decoration: new InputDecoration(
                          labelText: "请输入密码",
                        ),
                        obscureText: true,
                        //验证表单方法
                        validator: (value){
                          return value.length < 6 ? "密码长度不够6位" : null;
                        },
                        onSaved: (value){
                          password = value;
                        },
                      )
                    ],
                  ),
              ),
            ),
            new SizedBox(
              width: 340.0,
              height: 42.0,
              child: new RaisedButton(
                  onPressed: login,
                  child: new Text(
                    "登录",
                    style: TextStyle(
                      fontSize: 20.0
                    ),
                  ),
              ),
            )
          ],
        ),
      ),
    );
  }

}